
// ========== 重要提示 ========== //
// AI 助手请注意：
// 1. 请不要修改此页面模板文件，此文件是项目代码风格的权威参考标准
// 2. 您在生成任何页面代码时，必须完全严格地遵循此模板中的所有代码风格、缩进规范和编码惯例
// 3. 此模板中的每一个空格、换行、缩进、注释格式都代表了项目的标准，必须100%遵循
// 4. 任何与此模板不一致的代码都会被视为不规范代码
// 5. 重要规范：所有的样式都必须写到对应的 module.less 文件里面去，禁止在组件文件中直接写内联样式
// 6. 移除所有方法前的private或public关键字
// 7. 清理所有注释掉的代码和未使用的变量、函数
// 8. 移除所有空规则的 CSS 类名（即没有实际样式属性的CSS类）
// 9. 页面必须尽可能使用 @tarojs/components 组件库，优先使用官方提供的组件来构建界面，禁止使用div、span等原生HTML标签
// 10. 代码的注释要尽可能的简洁，节约行数，少写点空行
// 页面样式必须要使用module.less后缀的文件
// 重要规范：必须使用模块的方式导入样式，即通过import styles from './xxx.module.less'的方式
// 绝对禁止直接导入module.less文件而不使用模块语法
// 注意：绝对不要使用React.FC类型注解组件函数，所有代码必须使用4个空格缩进
// 重要提示：当一个元素有多个 class 类名时，需要使用 clsx 来组合这些 CSS 类名
// ============================= //
/*
 * @Author: AI Assistant
 * @Date: 2024-05-07 15:30:00
 * @Last Modified by: AI Assistant
 * @Last Modified time: 2024-05-07 15:30:00
 */
// 重要格式要求：所有函数和方法的注释必须使用单行注释格式（// 注释内容），禁止使用多行注释（/** ... */）

// 小程序页面模板文件
import React, { useState, useEffect } from 'react';
import { View, Text, Button, ScrollView, Input } from '@tarojs/components';
import { observer } from 'mobx-react-lite';
import pageTemplateStore from './PageTemplateStore';
import styles from './pageTemplate.module.less';

/**
 * 小程序页面模板组件
 * 遵循项目统一的开发规范：
 * 1. 组件名与文件名保持一致
 * 2. 必须使用observer包裹，以便响应mobx store中的变化
 * 3. 使用函数式组件 + Hooks
 * 4. 状态管理使用mobx store
 * 5. 方法前不添加private或public关键字
 */
const PageTemplate = observer(() => {

    // 页面生命周期：首次加载时执行
    useEffect(() => {
        pageTemplateStore.loadData();
    }, []);

    // 页面主渲染
    return (
        <View className={styles.pageTemplate}>
            {pageTemplateStore.loading ? (
                <View className={styles.loading_container}>
                    <Text className={styles.loading_text}>加载中...</Text>
                </View>
            ) : (
                <ScrollView className={styles.scroll_view}>
                    <View className={styles.content}>
                        {/* 页面头部 */}
                        <View className={styles.page_header}>
                            <Text className={styles.page_title}>页面模板</Text>
                            <Text className={styles.page_subtitle}>小程序端页面模板演示</Text>
                        </View>
                        
                        {/* 状态信息 */}
                        <View className={styles.status_info}>
                            <View className={styles.value_item}>
                                <Text className={styles.label}>value1:</Text>
                                <Text className={styles.value}>{pageTemplateStore.value1}</Text>
                            </View>
                            <View className={styles.value_item}>
                                <Text className={styles.label}>value2:</Text>
                                <Text className={styles.value}>{pageTemplateStore.value2}</Text>
                            </View>
                        </View>
                        
                        {/* 按钮组件 */}
                        <View className={styles.button_container}>
                            <Button type="primary" className={styles.button} onClick={() => pageTemplateStore.setValue1(pageTemplateStore.value1 + 1)}>改变value1</Button>
                            <Button type="default" className={styles.button} onClick={() => pageTemplateStore.setValue2(pageTemplateStore.value2 + 1)}>改变value2</Button>
                        </View>
                        
                        {/* 数据列表 */}
                        {pageTemplateStore.value3.length === 0 ? (
                            <View className={styles.empty_data}>
                                <Text>暂无数据</Text>
                            </View>
                        ) : (
                            <View className={styles.data_list}>
                                {pageTemplateStore.value3.map((item) => (
                                    <View key={item.id} className={styles.data_item}>
                                        <Text>{item.name}</Text>
                                    </View>
                                ))}
                            </View>
                        )}
                    </View>
                </ScrollView>
            )}
        </View>
    );
});